@rootSize :7.5vmin;
body {
  background-image: linear-gradient(to right, #122852, #312952);
}
.top {
  height: (342 / @rootSize);
  padding-top: (87 / @rootSize);
  background: url(../upload/bg.png) no-repeat;
  background-size: cover;
  // 头部四个盒子
  .list {
      display: flex;
      align-items: center;
      height: (91 / @rootSize);
      padding: 0 (27 / @rootSize);
      // background-color: pink;
      .logo {
          width: (169 / @rootSize);
          height: (91 /  @rootSize);
          // background-color: lime;
          margin-right: (15 / @rootSize);
          // img {
          //     height: 100%;
          // }
      }
      input {
          flex: 1;
          height: (52 / @rootSize);
          background: rgba(0,0,0,.8) url(../img/search.png) no-repeat ;
          background-position:  (19 / @rootSize) center;
          background-size: (24 / @rootSize) auto;
          border-radius: (8 / @rootSize);
          padding-left: (56 / @rootSize);
      }
      a {
          width: (52 / @rootSize);
          height: (52 / @rootSize);
          // background-color: gold;
          &.yx {
              margin: 0 (20 / @rootSize);
          }
          img {
              height: 100%;
          }
      }
  }
}
// banner
.banner {
  position: relative;
  width: (614 / @rootSize);
  height: (341 / @rootSize);
  margin: 0 auto;
  background-color: pink;
  // transform: translateY((-133 / @rootSzie));
  margin-top: (-133 / @rootSize);
  img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  // mask
  .mask {
      display: flex;
      align-items: center;
      // 以banner额为父级定位
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: (93 / @rootSize);
      padding: 0 (13 / @rootSize);
      background-color: rgba(0,0,0,.8);
      .pic {
          width: (65 / @rootSize);
          height: (65 / @rootSize);
          margin-right: (10 / @rootSize);
          // background-color: pink;
          img {
              width: 100%;
          }
      }
      .txt {
          flex: 1;
          h3 {
              font-size: (26 / @rootSize);
              color: #fff;
              font-weight: normal;
              span {
                  img {
                      width: (19 / @rootSize);
                      height: (22 / @rootSize);
                      // 图标偏下，向上移动
                      margin-top: (-5 / @rootSize);
                  }
                  color: #ffefa6;
              }
          }
          p {
              font-size: (22 / @rootSize);
              color: #9cb2c8;
          }
      }
      .play {
          width: (103 /  @rootSize);
          height: (41 /  @rootSize);
          background-color: #7c55c2;
          text-align: center;
          line-height: (41 /  @rootSize);
          color: #fff;
         font-size: (24 / @rootSize);
         border-radius: (30 / @rootSize);
      }
  }
}

// 新游试玩
.title {
  display: flex;
  justify-content: space-between;
  margin: (30 / @rootSize) (27 / @rootSize) (20 / @rootSize);
  h3 {
    img {
      height: (43 / @rootSize);
    }

  }
  a {
    font-size: (22 / @rootSize);
    color: #9cb2c8;
    img {
      width: (24 / @rootSize);
    }
  }
}
.list-sw {
  padding:0 (27 / @rootSize);
  ul {
    li {
      a {
        display: flex;
        .pic {
          overflow: hidden;
          width: (92 / @rootSize);
          height: (92 / @rootSize);
          margin-right: (17 / @rootSize);
          border-radius: (10 / @rootSize);
          img {
            width: 100%;
          }
        }
        .txt {
          flex: 1;
          border-bottom: 1px solid #211247;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .txt-1 {
            h3 {
              font-size: (26 / @rootSize);
              color: #fff;
              font-weight: normal;
              span {
                  img {
                      width: (19 / @rootSize);
                      height: (22 / @rootSize);
                      // 图标偏下，向上移动
                      margin-top: (-5 / @rootSize);
                  }
                  color: #ffefa6;
              }
          }
          p {
              font-size: (22 / @rootSize);
              color: #9cb2c8;
          }
          }
          .play {
            width: (103 /  @rootSize);
            height: (41 /  @rootSize);
            background-color: #7c55c2;
            text-align: center;
            line-height: (41 /  @rootSize);
            color: #fff;
           font-size: (24 / @rootSize);
           border-radius: (30 / @rootSize);
        }

        }
      }
    }
  }
}
// 热门专题
.rem-list {
  padding: 0 (27 / @rootSize);
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
    width: (341 / @rootSize);
    height: (334 / @rootSize);
    margin-bottom: (20 / @rootSize);
   
    a {
      display: block;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    }
  }
}
// 新游预约
.xinyou-list {
  padding: 0 (27 / @rootSize);
  ul {
    li {
      height: (123 / @rootSize);
      margin-top: (60 / @rootSize);
      margin-bottom: (18 / @rootSize);
      a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: (123 / @rootSize);
        padding: 0 (20 / @rootSize);
        background-color: rgba(0,0,0,.8);
        .pic {
          width: (108 / @rootSize);
          height: (141 / @rootSize);
          margin-right: (10 / @rootSize);
          transform: translateY((-20 / @rootSize));
          // background-color: pink;
          img {
              width: 100%;
          }
      }
        .txt {
          flex: 1;
          h3 {
              font-size: (26 / @rootSize);
              color: #fff;
              font-weight: normal;
              margin-top: (8 / @rootSize);
              span {
                  img {
                      width: (19 / @rootSize);
                      height: (22 / @rootSize);
                      // 图标偏下，向上移动
                      margin-top: (-5 / @rootSize);
                  }
                  color: #ffefa6;
              }
          }
          p {
         
          margin-top: (15/ @rootSize);
              font-size: (22 / @rootSize);
              color: #9cb2c8;
             
              .span-1 {
                border: 1px solid #7c55c2;
                color: #7c55c2;
                border-radius: (3 / @rootSize);
              }
              .span-2 {
                border: 1px solid #9cb2c8;
                color: #9cb2c8;
                border-radius: (3 / @rootSize);
              }
              .span-3 {
                border: 1px solid lawngreen;
                color: lawngreen;
                border-radius: (3 / @rootSize);
              }
              
              
          }
      }
      .play {
        width: (103 /  @rootSize);
        height: (41 /  @rootSize);
        background-color: #7c55c2;
        text-align: center;
        line-height: (41 /  @rootSize);
        color: #fff;
       font-size: (24 / @rootSize);
       border-radius: (30 / @rootSize);
    }
      
      }
    }
  }
}
.kong {
  height: (98 / @rootSize);
}
// foot
.foot {
  display: flex;
  position: fixed;
  object-fit: cover;
  bottom: 0;
  width: 100%;
  height: (98 / @rootSize);
  background-color: #fff;
  a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ccc;
    margin-top: (18 / @rootSize);
    img {
      width: (20 / @rootSize);
      height: (20 / @rootSize);
      margin-bottom: (7 / @rootSize);
    }
    p {
      margin-top: (8 / @rootSize);
      margin-bottom: (18 / @rootSize);
      font-size: (11 / @rootSize);
    }
  }
}
